【JavaScript / DOM】ノードの生成 - 要素ノード・テキストノード・属性ノード・コメントノード

JavaScript/DOMの『ノードの生成』について解説します。

検証環境

JavaScript -

macOS

14.1

ノードの生成

JavaScript/DOMはHTMLドキュメントのノードを生成できます。

ここでは要素ノード、属性ノード、テキストノード、コメントノードの生成について解説します。

要素ノード（createElement）

DocumentオブジェクトのcreateElementメソッドで要素ノードを生成します。

基本構文

document.createElement('タグ名');

サンプル

sample.html

<script type="text/javascript">
    ___ih_hl_start
    let node = document.createElement('div');
    ___ih_hl_end
    
    console.log(node);
</script>

Console

<div></div>

属性ノード（createAttribute）

DocumentオブジェクトのcreateAttributeメソッドで属性ノードを生成します。

基本構文

document.createAttribute('属性名');

サンプル

sample.html

<script type="text/javascript">
    ___ih_hl_start
    let node = document.createAttribute('class');
    ___ih_hl_end
    
    node.value = 'square';
    
    console.log(node);
</script>

Console

class="square"

属性値はtextContentプロパティでも設定できますが、一般的にvalueプロパティが用いられます。

テキストノード（createTextNode）

DocumentオブジェクトのcreateTextNodeメソッドでテキストノードを生成します。

基本構文

document.createTextNode('テキスト');

サンプル

sample.html

<script type="text/javascript">
    ___ih_hl_start
    let node = document.createTextNode('Hello World');
    ___ih_hl_end
    
    console.log(node);
</script>

Console

"Hello World"

コメントノード（createComment）

DocumentオブジェクトのcreateCommentメソッドでコメントノードを生成します。

基本構文

document.createComment('コメント');

サンプル

sample.html

<script type="text/javascript">
    ___ih_hl_start
    let node = document.createComment('COMMENT TEXT');
    ___ih_hl_end
    
    console.log(node);
</script>

Console

<!--COMMENT TEXT-->